<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>{{name}}的学习日常</h2>
        <button v-on:click="showinfo">点击我显示信息（不传参）</button><!-- 不传参 -->
        <button @click="changeinfo1(66,$event)">点我修改信息（传参）</button><!-- v-on的简写--@；传参 -->
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;//组织vue在启动的时候生成生产提示

        const a =  new Vue({
            el:"#root",
            data:{
                name:"江洋"
            },
            methods:{//离职前的挖坑技巧：把method的方法放data里，不影响使用但影响效率
                showinfo(event){
                    console.log(event.target);
                    alert(this.name+"在学习");
                },

                changeinfo1(num,event){
                    console.log(num);
                    console.log(event.target);
                    this.name="张扬";
                }
            }
        })
    </script>
</body>
</html>